<template>
  <div class="center">
    <h1>Sign in / Sign up</h1>
    <div class="logon">
      <div :class="overlaylong">
        <div class="overlaylong-Signin" v-if="disfiex == 0">
          <h2 class="overlaylongH2">Sign in</h2>
          <input type="text" placeholder="账号" v-model="loginUser.phone">
          <input type="password" placeholder="密码" v-model="loginUser.password">

          <div class="captcha-container">
            <input type="text" placeholder="验证码" v-model="loginUser.loginCaptcha" class="captcha-input">
            <button class="get-captcha-button" @click="loginGetCaptcha">{{ countdown > 0 ? `${countdown}s后重新获取` :
              '获取验证码' }}</button>
          </div>

          <h3>Forgot your password?</h3>
          <button class="inupbutton" @click="login">登 录</button>
        </div>
        <div class="overlaylong-Signup" v-if="disfiex == 1">
          <h2 class="overlaylongH2">Registered Account</h2>
          <input type="text" placeholder="姓名" v-model="registerUser.username">
          <input type="text" placeholder="手机号" v-model="registerUser.phone">
          <input type="password" placeholder="密码" v-model="registerUser.password">
          <input type="password" placeholder="再次输入密码" v-model="registerUser.confirmPassword">
          <input type="text" placeholder="居住楼房号" v-model="registerUser.address">
          <input type="text" placeholder="产权所有者姓名" v-model="registerUser.ownerName">
          <input type="text" placeholder="产权证号" v-model="registerUser.propertyNumber">
          <div class="captcha-container">
            <input type="text" placeholder="验证码" v-model="registerUser.registerCaptcha" class="captcha-input">
            <button class="get-captcha-button" @click="registerGetCaptcha">{{ countdown > 0 ? `${countdown}s后重新获取` :
              '获取验证码' }}</button>
          </div>

          <button class="inupbutton" @click="register">注 册</button>
        </div>
      </div>
      <div :class="overlaytitle">
        <div class="overlaytitle-Signin" v-if="disfiex == 0">
          <h2 class="overlaytitleH2">Hello, Friend!</h2>
          <p class="overlaytitleP">
            Enter your personal details and start journey with us
          </p>
          <div class="buttongohs" @click="Signin">Sign up</div>
        </div>
        <div class="overlaytitle-Signup" v-if="disfiex == 1">
          <h2 class="overlaytitleH2">Welcome Back!</h2>
          <p class="overlaytitleP">To keep connected with us please login with your personal info</p>
          <div class="buttongohs" @click="Signup">Sign in</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { parseJwt } from '@/utils/parseJWT';

export default {
  data() {
    return {
      loginUser: {
        phone: '', // 登录账号
        password: '', // 登录密码
        loginCaptcha: '', // 验证码
      },

      registerUser: {
        username: '', // 注册姓名
        phone: '', // 注册手机号
        password: '', // 注册密码
        confirmPassword: '', // 确认密码
        address: '', // 居住楼房号
        ownerName: '', // 产权所有者姓名
        propertyNumber: '', // 产权证号
        registerCaptcha: '' // 注册验证码
      },
      countdown: 0, // 倒计时

      overlaylong: 'overlaylong',
      overlaytitle: 'overlaytitle',
      disfiex: 0
    };
  },
  methods: {
    login() {
      if (this.loginUser.phone == '' || this.loginUser.password == '') {
        alert('请输入账号和密码');
      } else {


        // 调用登录接口
        axios.post('/api/user/login', this.loginUser)
          .then(result => {
            //将result返回的数据赋值给result，即为controller返回的result
            result = result.data;
            //登录返回结果判断登录是否成功
            if (result.code == 1) {

              // 从响应中获取 JWT
              const token = result.data; // 假设后端返回 { token: 'xxx' }

              // 存储到 localStorage（或 sessionStorage）
              localStorage.setItem('token', token);

              console.log('登录成功,用户信息:', parseJwt(token));
              // 处理成功逻辑，根据返回用户的身份跳转到不同的路由

              if (parseJwt(token).payload.status === 1) {
                // 跳转到管理员界面
                this.$router.push('/property/home');
              } else if (parseJwt(token).payload.status === 2) {
                // 跳转到业主界面
                this.$router.push('/owner/home');
              }
            }
            else {
              alert(result.msg);
            }
          })
          .catch(error => {
            console.error('登录失败:', error);
            // 处理失败逻辑，例如显示错误信息
          });
      }
    },
    register() {
      if (this.registerUser.username == '' || this.registerUser.address == '' ||
        this.registerUser.ownerName == '' || this.registerUser.propertyNumber == '' ||
        this.registerUser.phone == '' || this.registerUser.password == '' ||
        this.registerUser.confirmPassword == '') {
        alert('请输入完整信息');
      } else if (this.registerUser.password != this.registerUser.confirmPassword) {
        alert('两次密码不一致');
      } else {
        // 调用注册接口
        axios.post('/api/user/register', this.registerUser)
          .then(result => {
            result = result.data;
            if (result.code == 1) {
              // 处理成功逻辑，切换登录
              this.Signin();
            }
            else {
              alert(result.msg);
            }
          })
          .catch(error => {
            // 处理失败逻辑，显示错误信息
            alert('注册失败，错误信息:', error);
          });
      }
    },
    loginGetCaptcha() {
      if (this.loginUser.account == '' || this.loginUser.password == '') {
        alert('请输入账号和密码');
        return;
      }
      if (this.countdown > 0) return; // 如果倒计时未结束，禁止重复获取
      console.log('获取注册验证码');
      this.startCountdown(); // 启动倒计时
      // 调用后端接口获取验证码
      // 发送请求到后端
      axios.post('/api/getCaptcha', this.loginUser)
        .then(result => {
          console.log('验证码发送成功:', result.data);
          // 处理成功逻辑，例如显示提示信息
        })
        .catch(error => {
          console.error('验证码发送失败:', error);
          // 处理失败逻辑，例如显示错误信息
        });
    },
    registerGetCaptcha() {
      if (this.registerUser.phone == '') {
        alert('请输入手机号');
        return;
      }
      if (this.countdown > 0) return; // 如果倒计时未结束，禁止重复获取
      console.log('获取注册验证码');
      this.startCountdown(); // 启动倒计时
      // 调用后端接口获取验证码
      axios.post('/api/getCaptcha', this.registerUser)
        .then(result => {
          console.log('验证码发送成功:', result.data);
          // 处理成功逻辑，例如显示提示信息
        })
        .catch(error => {
          console.error('验证码发送失败:', error);
          // 处理失败逻辑，例如显示错误信息
        });
    },

    // 启动倒计时
    startCountdown() {
      this.countdown = 60; // 设置倒计时为 60 秒
      const timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) clearInterval(timer); // 倒计时结束
      }, 1000);
    },

    Signin() {
      this.overlaylong = "overlaylongleft";
      this.overlaytitle = "overlaytitleright";
      setTimeout(() => {
        this.disfiex = 1;
      }, 200);
    },
    Signup() {
      this.overlaylong = "overlaylongright";
      this.overlaytitle = "overlaytitleleft";
      setTimeout(() => {
        this.disfiex = 0;
      }, 200);
    }
  }
};
</script>

<style>
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.center {
  height: 100vh;
  width: 100vw;
  background-image: url('../assets/image/login.jpg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

h1 {
  font-size: 30px;
  color: black;
  margin-bottom: 20px;
}

.logon {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  width: 768px;
  max-width: 90%;
  min-height: 480px;
  display: flex;
  background: -webkit-linear-gradient(right, #4284db, #29eac4);
}

.overlaylong {
  border-radius: 10px 0 0 10px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaylongleft {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transform: translateX(100%);
  transition: transform 0.6s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaylongright {
  border-radius: 10px 0 0 10px;
  width: 50%;
  height: 100%;
  background-color: #fff;
  transform: translateX(0%);
  transition: transform 0.6s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaytitle {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlaytitleH2 {
  font-size: 30px;
  color: #fff;
  margin-top: 15px;
}

.overlaytitleP {
  font-size: 15px;
  color: #fff;
  margin-top: 20px;
}

.overlaytitleleft {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(0%);
  transition: transform 0.6s ease-in-out;
}

.overlaytitleright {
  border-radius: 0px 10px 10px 0px;
  width: 50%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-100%);
  transition: transform 0.6s ease-in-out;
}

.overlaytitle-Signin,
.overlaytitle-Signup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.buttongohs {
  width: 180px;
  height: 40px;
  border-radius: 50px;
  border: 1px solid #fff;
  color: #fff;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
  margin-top: 40px;
  cursor: pointer;
}

.overlaylongH2 {
  font-size: 25px;
  color: black;
}

.overlaylong-Signin,
.overlaylong-Signup {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

input {
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 10px 0;
  width: 240px;
}

h3 {
  font-size: 10px;
  margin-top: 10px;
  cursor: pointer;
}

.inupbutton {
  background-color: #29eac4;
  border: none;
  width: 180px;
  height: 40px;
  border-radius: 50px;
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-bottom: 20px;
  cursor: pointer;
}

.captcha-container {
  width: 270px;
  /* 与上方 input 宽度一致 */
  display: flex;
  align-items: center;
  gap: 10px;
  /* 调整输入框和按钮之间的间距 */
}

.captcha-input {
  flex: 1;
  /* 输入框占据剩余空间 */
  background-color: #eee;
  border: none;
  padding: 12px 15px;
  margin: 10px 0;
}

.get-captcha-button {
  background-color: #29eac4;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
  /* 防止按钮文字换行 */
}

.get-captcha-button:hover {
  background-color: #1fc7a6;
}
</style>